<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>This is a dice game</title>
<script type="text/javascript">
var diceNum1 = 0;
var diceNum2 = 0;
var sumNum = 0;
var c;
var painter

function throwDice() {
	diceNum1 = Math.floor(6 * Math.random()) + 1;
	diceNum2 = Math.floor(6 * Math.random()) + 1;
	sumNum = diceNum1 + diceNum2;
	
	c = document.getElementById("mainCanvas");
	painter = c.getContext("2d");
	
	drawDice(diceNum1,true);
	drawDice(diceNum2,false);
	return false;
}

function drawDice(num ,isFirst) {
	
	painter.lineWidth = 3;
	painter.fillStyle = "rgb(0,0,255)";
	
	if (isFirst) {
		
	painter.fillRect(50,50,80,80);
	painter.strokeRect(50,50,80,80);
	} else {
		
	painter.fillRect(180,50,80,80);
	painter.strokeRect(180,50,80,80);
	}
		
	
	var type = num%2;
	if (type == 0) 
		drawEven(num,isFirst);
	else 
		drawOdd(num,isFirst);
}

function drawOdd(num,isFirst) {
	var toLeft = 20;
	var toTop = 20;
	var midToLeft = 40;
	var midToTop = 40;
	
	toTop += 50;	
	midToTop += 50;
	
	if (isFirst) {
		toLeft += 50;
		midToLeft += 50;
		
	} else {
		toLeft += 180;
		midToLeft += 180;
	}
	
	painter.fillStyle = "rgb(255,0,0)";
	painter.beginPath();
	painter.arc(midToLeft,midToTop,5,0,Math.PI*2,true);
	painter.fill();
	
	if (num >= 3) {
		
		painter.beginPath();
		painter.arc(toLeft,toTop,5,0,Math.PI*2,true);
		painter.fill();
		
		painter.beginPath();
		painter.arc(toLeft+40,toTop+40,5,0,Math.PI*2,true);
		painter.fill();
	}
	
	if (num == 5) {

		painter.beginPath();
		painter.arc(toLeft+40,toTop,5,0,Math.PI*2,true);
		painter.fill();
		
		painter.beginPath();
		painter.arc(toLeft,toTop+40,5,0,Math.PI*2,true);
		painter.fill();
	}
}

function drawEven(num,isFirst) {
	var toLeft = 20;
	var toTop = 20;
	
	toTop += 50;
	
	if (isFirst) {
		toLeft += 50;
		
	} else {
		toLeft += 180;
	}
	
	painter.fillStyle = "rgb(255,0,0)";
	painter.beginPath();
	painter.arc(toLeft,toTop,5,0,Math.PI*2,true);
	painter.fill();
	
	painter.fillStyle = "rgb(255,0,0)";
	painter.beginPath();
	painter.arc(toLeft+40,toTop+40,5,0,Math.PI*2,true);
	painter.fill();
	
	if (num >= 4) {
		
		painter.beginPath();
		painter.arc(toLeft+40,toTop,5,0,Math.PI*2,true);
		painter.fill();
		
		painter.beginPath();
		painter.arc(toLeft,toTop+40,5,0,Math.PI*2,true);
		painter.fill();
	}
	
	if (num == 6) {

		painter.beginPath();
		painter.arc(toLeft,toTop+20,5,0,Math.PI*2,true);
		painter.fill();
		
		painter.beginPath();
		painter.arc(toLeft+40,toTop+20,5,0,Math.PI*2,true);
		painter.fill();
	}
}

</script>
</head>
<body>
<canvas width="400" height="300" id="mainCanvas"></canvas>
<br/>
<button onClick="throwDice()">ThrowDice</button>


</body>
</html>